<template>
  <!-- 购买或者加入购物车的时候选择商品的种类 -->
  <u-popup
    mode="bottom"
    v-model="showBuyPopup"
    :z-index="121"
    border-radius="24"
    safe-area-inset-bottom
  >
    <view class="popup-body">
      <view class="pup-details" style="background-color: #ffffff">
        <view class="pup-details-top">
          <view class="goods-img">
            <image :src="skuImg" mode="aspectFill"></image>
          </view>
          <view class="goods-info">
            <view class="price">
              <text>¥</text>
              <text>{{ couponInfo.price | priceBeforeZero }}</text>
              <text>{{ couponInfo.price | priceAfterZero }}</text>
            </view>
            <view class="rest-num">优惠券</view>
            <view class="has-selected">满100.00元可用</view>
          </view>
        </view>

        <view class="coupon-price">
          <view class="title">金额</view>
          <view class="pay-info">
            <text class="unit">¥</text>
            <text>200</text>
            <text class="grey">积分+</text>
            <text class="unit">¥</text>
            <text>1</text>
            <text class="samll">.00</text>
          </view>
        </view>

        <view class="shop-num">
          <view class="shop-num-text">数量</view>
          <view>
            <u-number-box
              v-model="selectNum"
              @change="selectNumChange"
              :min="1"
            ></u-number-box>
          </view>
        </view>
      </view>

      <view class="close-icon" @click="hidePopup">
        <view class="icon-box">
          <i class="iconfont icon-close"></i>
        </view>
      </view>
      <!-- 底部按钮 -->
      <view class="foot-btns">
        <view class="foot-content">
          <view class="foot-btn">立即购买</view>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: "",
  props: {
    couponInfo: {
      type: Object,
      default: {},
    },
  },
  mixins: [],
  components: {},
  data() {
    return {
      selectNum: 1,
      showBuyPopup: false,
    };
  },
  mounted() {},
  watch: {},
  filters: {
    priceBeforeZero(val) {
      if (!val) return "";
      val = val.toString();
      if (val.indexOf(".") < 0) return `${val}.`;
      return val.substr(0, val.indexOf("."));
    },
    priceAfterZero(val) {
      if (!val) return "";
      val = val.toString();
      if (val.indexOf(".") < 0) return "00";
      return val.substr(val.indexOf("."), val.length);
    },
  },
  computed: {
    skuImg() {
      if (this.finalmsg && this.finalmsg != null) {
        if (this.finalmsg.pic && this.finalmsg.pic != "") {
          return this.finalmsg.pic;
        } else {
          return this.shopimg;
        }
      } else {
        return this.shopimg;
      }
    },
    skuPrice() {
      if (this.finalmsg && this.finalmsg != null) {
        if (this.finalmsg.is_level) {
          return this.finalmsg.level_price;
        } else {
          return this.finalmsg.goods_price;
        }
      } else {
        if (this.shopmsg) return this.shopmsg.price;
      }
    },
    skuRest() {
      if (this.finalmsg && this.finalmsg != null) {
        return this.finalmsg.num;
      } else {
        if (this.shopmsg) return this.shopmsg.num;
      }
    },
  },
  methods: {
    //关闭弹窗
    closePopup() {
      this.$emit("closePopup");
    },
    hidePopup() {
      this.showBuyPopup = false;
      this.skuText = "";
    },
    showPopup() {
      this.showBuyPopup = true;
    },
    selectNumChange(e) {
      this.$emit("setSelectNum", e.value);
    },
  },
};
</script>

<style lang="scss" scoped>
.popup-body {
  width: 100%;
  background-color: #ffffff;
  padding-top: 4.8vw;
  max-height: 80vh;
  position: relative;
  .pup-details {
    padding-bottom: 136rpx;
    .pup-details-top {
      padding: 0 5.06vw 3.46vw;
      display: flex;
      align-items: flex-end;
      position: relative;
      .goods-img {
        width: 25.6vw;
        height: 25.6vw;
        background: #f2f2f2;
        border-radius: 1.86vw;
        overflow: hidden;
        margin-right: 2.67vw;
        image {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      .goods-info {
        text-align: left;
        .price {
          display: flex;
          align-items: flex-end;
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: 600;
          color: #f0250e;
          text:nth-child(2) {
            font-size: 44rpx;
            line-height: 47rpx;
          }
        }
        .rest-num {
          font-size: 22rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #f0250e;
        }
        .has-selected {
          font-size: 22rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #8c8c8c;
        }
      }
    }

    .coupon-price {
      padding-left: 6.93vw;
      .title {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #262626;
        padding-bottom: 20rpx;
      }
      .pay-info {
        display: flex;
        align-items: baseline;
        text {
          font-size: 44rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #f0250e;
        }
        .unit {
          font-size: 30rpx;
        }
        .grey {
          font-size: 22rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.85);
          margin: 2px;
        }
        .samll {
          font-size: 22rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #f0250e;
        }
      }
    }

    .shop-num {
      margin-top: 2.67vw;
      padding: 0 6.4vw;
      height: 9.86vw;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .shop-num-text {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #262626;
      }
    }
  }
  .close-icon {
    width: 12.78vw;
    height: 12.78vw;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 11;
    display: flex;
    justify-content: center;
    align-items: center;

    .iconfont {
      color: #262626;
      font-weight: 600;
      font-size: 36rpx;
    }
  }

  .foot-btns {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 121;
    border-top: 1px solid #f0f1f3;
    .foot-content {
      width: 100%;
      height: 13.34vw;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 4.8vw;
      .foot-btn {
        width: 90.4vw;
        height: 88rpx;
        background: #f0250e;
        border-radius: 44rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
      }
    }

    .safe {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}
</style>
